import { Routes, Route, HashRouter } from "react-router-dom";
import { toast } from "./components/Toast/Toast";
import { lazy, Suspense, useEffect } from "react";
import { showAllLastMes } from "./components/FixedToast/FixedToast";
import _ from "lodash";
import { useAppDispatch } from "./utils/store/hooks";
import { updateDevice } from "./utils/store/deviceSlice";
import { accessApi } from "./utils/backend/server";
import { Spin } from "./components/Spin/Spin";
import React from "react";

const LazyIndex = lazy(() => import("./views/Index/Index"));
const LazyLoading = lazy(() => import("./views/Loading/Loading"));
const LazyExperiment = lazy(() => import("./views/Experiment/Experiment"));
const LazyPassword = lazy(() => import("./views/Password/Password"));
const LazyMusic = lazy(() => import("./views/Music/Music"));
const LazySongManagement = lazy(() =>
  import("./views/SongManagement/SongManagement")
);
const LazyFunctions = lazy(() => import("./views/Functions/Functions"));
const LazyCollections = lazy(() =>
  import("./views/Functions/children/Collections/Collections")
);
const LazyTimer = lazy(() => import("./views/Functions/children/Timer/Timer"));
const LazyUpload = lazy(() =>
  import("./views/Functions/children/Upload/Upload")
);
const LazyTools = lazy(() => import("./views/Functions/children/Tools/Tools"));
const LazyTimetable = lazy(() => import("./views/Timetable/Timetable"));
const LazyNotFound = lazy(() => import("./views/NotFound/NotFound"));
const LazyClipboard = lazy(() =>
  import("./views/Functions/children/Clipboard/Clipboard")
);

const LazyQr = lazy(() => import("./views/Functions/children/QrCode/QrCode"));
const LazyDoodle = lazy(() =>
  import("./views/Functions/children/Doodle/Doodle")
);
const LazyEval = lazy(() => import("./views/Functions/children/Eval/Eval"));
const LazyCommands = lazy(() =>
  import("./views/Functions/children/Commands/Commands")
);
const LazyHistory = lazy(() =>
  import("./views/Functions/children/History/History")
);
const LazyEngine = lazy(() =>
  import("./views/Functions/children/Engine/Engine")
);

function App() {
  // const dispatch = useDispatch();
  const dispatch = useAppDispatch();
  // const functionRoutes = import.meta.glob("./views/Functions/children/*.jsx");

  useEffect(() => {
    showAllLastMes();

    accessApi
      .online()
      .then((res) => {
        if (res.code === 200) {
          toast("service is online!!");
          return;
        }

        toast("unknown error!!");
      })
      .catch((err) => {
        toast("service is offline!");
      });
    // toast("Welcome back!");

    dispatch(updateDevice(screen.availWidth >= 768 ? "computer" : "mobile"));

    const resizeListener = _.throttle(() => {
      dispatch(updateDevice(screen.availWidth >= 768 ? "computer" : "mobile"));
    }, 2000);

    window.addEventListener("resize", resizeListener);

    return () => {
      window.removeEventListener("resize", resizeListener);
    };
  }, []);

  return (
    <HashRouter>
      <Routes>
        <Route
          path="/"
          element={
            <Suspense fallback={<Spin />}>
              <LazyIndex />
            </Suspense>
          }
        />
        <Route
          path="/index"
          element={
            <Suspense fallback={<Spin />}>
              <LazyIndex />
            </Suspense>
          }
        />
        <Route
          path="/loading"
          element={
            <Suspense fallback={<Spin />}>
              <LazyLoading />
            </Suspense>
          }
        />
        <Route
          path="/experiment"
          element={
            <Suspense fallback={<Spin />}>
              <LazyExperiment />
            </Suspense>
          }
        />
        <Route
          path="/password"
          element={
            <Suspense fallback={<Spin />}>
              <LazyPassword />
            </Suspense>
          }
        />
        <Route
          path="/music"
          element={
            <Suspense fallback={<Spin />}>
              <LazyMusic />
            </Suspense>
          }
        />
        <Route
          path="/songManagement"
          element={
            <Suspense fallback={<Spin />}>
              <LazySongManagement />
            </Suspense>
          }
        />
        <Route
          path="/functions"
          element={
            <Suspense fallback={<Spin />}>
              <LazyFunctions />
            </Suspense>
          }
        >
          <Route
            path="/functions/"
            element={
              <Suspense fallback={<Spin />}>
                <LazyCollections />
              </Suspense>
            }
          />
          <Route
            path="/functions/collections"
            element={
              <Suspense fallback={<Spin />}>
                <LazyCollections />
              </Suspense>
            }
          />
          <Route
            path="/functions/clipboard"
            element={
              <Suspense fallback={<Spin />}>
                <LazyClipboard />
              </Suspense>
            }
          />
          <Route
            path="/functions/timer"
            element={
              <Suspense fallback={<Spin />}>
                <LazyTimer />
              </Suspense>
            }
          />
          <Route
            path="/functions/upload"
            element={
              <Suspense fallback={<Spin />}>
                <LazyUpload />
              </Suspense>
            }
          />
          <Route
            path="/functions/tools"
            element={
              <Suspense fallback={<Spin />}>
                <LazyTools />
              </Suspense>
            }
          />
        </Route>
        <Route
          path="/timetable"
          element={
            <Suspense fallback={<Spin />}>
              <LazyTimetable />
            </Suspense>
          }
        />
        <Route
          path="/qrCode"
          element={
            <Suspense fallback={<Spin />}>
              <LazyQr />
            </Suspense>
          }
        />
        <Route
          path="/doodle"
          element={
            <Suspense fallback={<Spin />}>
              <LazyDoodle />
            </Suspense>
          }
        />
        <Route
          path="/eval"
          element={
            <Suspense fallback={<Spin />}>
              <LazyEval />
            </Suspense>
          }
        />
        <Route
          path="/commands"
          element={
            <Suspense fallback={<Spin />}>
              <LazyCommands />
            </Suspense>
          }
        />
        <Route
          path="/history"
          element={
            <Suspense fallback={<Spin />}>
              <LazyHistory />
            </Suspense>
          }
        />
        <Route
          path="/engine"
          element={
            <Suspense fallback={<Spin />}>
              <LazyEngine />
            </Suspense>
          }
        />
        <Route
          path="*"
          element={
            <Suspense fallback={<Spin />}>
              <LazyNotFound />
            </Suspense>
          }
        />
      </Routes>
    </HashRouter>
  );
}

export default App;
